<!DOCTYPE html>
<!--suppress SpellCheckingInspection, HtmlFormInputWithoutLabel -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>人事</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
    <link rel="stylesheet" href="../static/css/bootstrap-fileinput.css" th:href="@{/css/bootstrap-fileinput.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container mdui-p-t-2 mdui-p-b-2">
    <form method="post" action="/staff" enctype="multipart/form-data" th:object="${staff}">
        <input type="hidden" name="id" th:value="*{id}">
        <input type="hidden" name="_method" value="PUT" th:if="*{id!=null}">
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">员工姓名</label>
                <input name="name" class="mdui-textfield-input" type="text" maxlength="16" required th:value="*{name}"/>
                <div class="mdui-textfield-error">员工姓名不能为空</div>
            </div>
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">联系方式</label>
                <input name="phone" class="mdui-textfield-input" type="text" maxlength="16" pattern="^1[0-9]{10}$"
                       required th:value="*{phone}"/>
                <div class="mdui-textfield-error">联系方式不能为空或格式错误</div>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">入职时间</label>
                <input name="entryDate" class="mdui-textfield-input" type="date" th:value="*{#dates.format(entryDate, 'yyyy-MM-dd')}" required/>
                <div class="mdui-textfield-error">请选择员工入职时间</div>
            </div>
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">工号</label>
                <input name="number" class="mdui-textfield-input" type="text" maxlength="32" th:value="*{number}"/>
            </div>
        </div>

        <div class="mdui-row">
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">部门</label>
                <select name="department" class="mdui-select" required>
                    <option value="">请选择部门</option>
                    <option th:each="department:${departments}" th:value="${department}" th:text="${department}"
                            value="" th:selected="${department eq staff.department}">
                        部门
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336" th:if="${#lists.isEmpty(departments)}">
                    请先添加部门
                </div>
            </div>
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">职务</label>
                <select name="post" class="mdui-select" required>
                    <option value="">请选择职务</option>
                    <option th:each="post:${posts}" th:value="${post}" th:text="${post}" value="" th:selected="${post eq staff.post}">职务</option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336" th:if="${#lists.isEmpty(posts)}">
                    请先添加职务
                </div>
            </div>
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">挂号类型</label>
                <select name="registeredType" class="mdui-select">
                    <option value="">请选择挂号类型</option>
                    <option th:each="department:${departments}" th:value="${department}" th:text="${department}"
                            value="" th:selected="${department eq staff.department}">
                        部门
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #EC407A" th:if="${#lists.isEmpty(departments)}">
                    建议先添加挂号类型
                </div>
            </div>
        </div>

        <div class="mdui-row">
            <div class="mdui-col-md-12 mdui-textfield">
                <label class="mdui-textfield-label">住址</label>
                <input class="mdui-textfield-input" type="text" name="address" maxlength="64" th:value="*{address}"/>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">性别</label>
                <input name="gender" class="mdui-textfield-input" type="text" maxlength="2" th:value="*{gender}"/>
            </div>
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">年龄</label>
                <input name="age" class="mdui-textfield-input" type="number" th:value="*{age}"/>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">员工照片</label>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="mdui-m-b-1">
                        <span class="mdui-btn mdui-btn-dense btn-file mdui-color-blue-accent mdui-ripple">
                            <span class="mdui-btn mdui-btn-dense mdui-color-blue-accent mdui-ripple fileinput-new">选择文件</span>
                            <span class="mdui-btn mdui-btn-dense mdui-color-blue-accent mdui-ripple fileinput-exists">换一张</span>
                            <input type="file" name="portraitFile" id="picID" accept="image/gif,image/jpeg,image/x-png">
                            <input type="hidden" name="portrait" th:value="*{portrait}">
                        </span>
                        <a href="javascript:void(0)" data-dismiss="fileinput"
                           class="mdui-btn mdui-btn-dense mdui-color-amber-accent fileinput-exists mdui-ripple">
                            移除
                        </a>
                    </div>
                    <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
                        <img id="picImg" style="width: auto;height: auto;max-height: 140px;"
                             src="../static/image/noimage.png" th:src="${#strings.isEmpty(staff.portrait)?'/image/noimage.png':'/portrait/'+staff.portrait}" alt="">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail"
                         style="max-width: 200px; max-height: 150px;">
                    </div>
                </div>
            </div>
        </div>

        <div class="mdui-row">
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-raised mdui-center" type="submit">
                <i class="mdui-icon mdui-icon-left material-icons">&#xe161;</i>
                保存
            </button>
        </div>
    </form>
</div>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script src="../static/js/jquery-2.1.1.js" th:src="@{/js/jquery-2.1.1.js}"></script>
<script src="../static/js/bootstrap-fileinput.js" th:src="@{/js/bootstrap-fileinput.js}"></script>
</body>
<script>
    var $$ = mdui.JQ;
    var listItem = $$('#staffs');
    listItem.addClass('mdui-list-item-active');
    listItem.parent().parent().addClass('mdui-collapse-item-open');
</script>
</html>